
<template>
<theme-box title="商户广告添加">
    <form class="form-inline" @submit.prevent v-el:form id="form">
        <div class="box-body">
            <form-group title="商户" :required="true">
                <select name="mchtId" class="form-control" v-model="mchtIdValue" style="width: 265px;">
                    <option v-for="mcht in mchtList" :value="mcht.value">
                        {{mcht.key | optionValue 23}}
                    </option>
                </select>
            </form-group>
            <form-input title="名称" :required="true" name="name"></form-input>
            <form-group title="图片"  :required="true" name="file">
                <file-upload  v-ref:fileupload class="fileImg"></file-upload>
            </form-group>
            <form-select title="顺序" :required="true" name="seq" :options="seqOptions"></form-select>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
            <v-button type="reset" @click="reset">重置</v-button>
            <v-button type="submit" theme="primary" class="pull-right" id="submit">确认</v-button>
        </div>
        <!-- /.box-footer -->
    </form>
</theme-box>
</template>

<script>
import 'plugins/jquery-validation';
import {
    dateTime
} from 'ui/collections/general.js'

var serialize = require('form-serialize');

export default {
    data: () => ({
        mchtList: [],
        seqOptions:[
            {key:"1",value:"1"},
            {key:"2",value:"2"},
            {key:"3",value:"3"},
            {key:"4",value:"4"},
            {key:"5",value:"5"},
        ]
    }),
    methods: {
        reset() {
            $("label.error").remove();
            this.$els.form.reset()
        },
        getMcht(data) {
            let self = this;
            var mchtId = JSON.parse(localStorage.getItem("id_token")).mchtId
            self.$post({
                url: "/api/v2" + projectName_Url + "/list/mcht/"+ mchtId,
                method:"GET"
            }).then(response => {
                let list = response.content.info;
                self.$set("mchtList", list);
                self.mchtIdValue = list[0].value
            }, error => {});
        }
    },
    ready() {
        dateTime()
        var self = this;
        self.getMcht();
        $(this.$els.form).validate({
            submitHandler: async function(form) {
                let formData = new FormData(form)
                loading(true);
                var result = await self.$post({
                    url: "/api/v2" + projectName_Url + "/plat/mchtBanner/add",
                    data: formData,
                    method:"POST"
                }).then(response => {
                    let data = {
                        title: "操作成功",
                        content: "是否进入商户广告列表查看?"
                    }
                    self.reset();
                    Midway.confirm(data).then(function() {
                        self.$route.router.go('/mchtadvier/list');
                    })
                }).then(() => loading(false)).catch(() => loading(false))
            },
            errorPlacement: function(error, element) {
                if (element.attr("name") == "file") {
                    error.insertAfter(".file-item");
                } else {
                    error.insertAfter(element);
                }
            },
            rules: {
                name: {
                    required:true,
                    stringMaxLength: 50
                },
                seq: {
                    required: true,
                    digits: true
                },
                file: {
                    required: true
                },
            },
            messages: {
                file: {
                    required: "请选择附件"
                }
            }
        });
        $("#submit").click(function(){
            $(this).attr("disabled","true"); //设置变灰按钮
            $("#form").submit();//提交表单
            setTimeout("$('#submit').removeAttr('disabled')",3000); //设置三秒后提交按钮 显示

        })
    }
}
</script>
